<template>
  <el-form label-width="90px" size="mini">
    <el-collapse value="1" class="customer-collapse">
      <el-form-item label="背景色">
        <el-color-picker v-model="attribute.backgroundColor" show-alpha/>
      </el-form-item>
      <tm-select v-if="false" v-model="attribute.series.roseType" :data="roseTypeList"></tm-select>
      <el-collapse-item name="1" title="标题">
        <tm-group label="标题1">
          <el-form-item label="显示">
            <el-switch v-model="attribute.title[0].show"></el-switch>
          </el-form-item>
          <el-form-item></el-form-item>
          <el-form-item label="水平位置">
            <el-input v-model="attribute.title[0].left"/>
          </el-form-item>
          <el-form-item label="垂直位置">
            <el-input v-model="attribute.title[0].top"/>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="attribute.title[0].textStyle.fontSize" />
          </el-form-item>
          <el-form-item label="字体粗细">
            <el-input-number :step="100" v-model="attribute.title[0].textStyle.fontWeight" />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="attribute.title[0].textStyle.color" show-alpha/>
          </el-form-item>
        </tm-group>

        <tm-group label="标题2">
          <el-form-item label="显示">
            <el-switch v-model="attribute.title[1].show"></el-switch>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="attribute.title[1].text" clearable/>
          </el-form-item>
          <el-form-item label="水平位置">
            <el-input v-model="attribute.title[1].left"/>
          </el-form-item>
          <el-form-item label="垂直位置">
            <el-input v-model="attribute.title[1].top"/>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="attribute.title[1].textStyle.fontSize" />
          </el-form-item>
          <el-form-item label="字体粗细">
            <el-input-number :step="100" v-model="attribute.title[1].textStyle.fontWeight" />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="attribute.title[1].textStyle.color" show-alpha/>
          </el-form-item>
        </tm-group>

        <tm-group label="标题3">
          <el-form-item label="显示">
            <el-switch v-model="attribute.title[2].show"></el-switch>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="attribute.title[2].text" clearable/>
          </el-form-item>
          <el-form-item label="水平位置">
            <el-input v-model="attribute.title[2].left"/>
          </el-form-item>
          <el-form-item label="垂直位置">
            <el-input v-model="attribute.title[2].top"/>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="attribute.title[2].textStyle.fontSize" />
          </el-form-item>
          <el-form-item label="字体粗细">
            <el-input-number :step="100" v-model="attribute.title[2].textStyle.fontWeight" />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="attribute.title[2].textStyle.color" show-alpha/>
          </el-form-item>
        </tm-group>



      </el-collapse-item>
      <el-collapse-item title="外圈">
        <el-form-item label="显示">
          <el-switch v-model="attribute.bar.show"/>
        </el-form-item>
        <tm-group label="半径">
          <el-form-item label="半径1">
            <el-input v-model="attribute.polar.radius[0]" />
          </el-form-item>
          <el-form-item label="半径2">
            <el-input v-model="attribute.polar.radius[1]" />
          </el-form-item>
        </tm-group>
        <el-form-item label="背景色">
          <el-color-picker v-model="attribute.bar.backgroundColor" show-alpha/>
        </el-form-item>
        <el-form-item label="前景色">
          <el-color-picker v-model="attribute.bar.colors[0]" show-alpha/>
          <el-color-picker v-model="attribute.bar.colors[1]" show-alpha/>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item title="内圈">
        <el-form-item label="显示">
          <el-switch v-model="attribute.pie.show"/>
        </el-form-item>
        <tm-group label="半径">
          <el-form-item label="半径1">
            <el-input v-model="attribute.pie.radius[0]" />
          </el-form-item>
          <el-form-item label="半径2">
            <el-input v-model="attribute.pie.radius[1]" />
          </el-form-item>
        </tm-group>
        <el-form-item label="分割数">
          <el-input-number :min="1" v-model="attribute.pie.steps"/>
        </el-form-item>
        <el-form-item label="边框宽度">
          <el-input-number v-model="attribute.pie.borderWidth"/>
        </el-form-item>
        <el-form-item label="边框颜色">
          <el-color-picker v-model="attribute.pie.borderColor" show-alpha/>
        </el-form-item>
        <el-form-item label="背景色">
          <el-color-picker v-model="attribute.pie.backgroundColor" show-alpha/>
        </el-form-item>
        <el-form-item label="前景色">
          <el-color-picker v-model="attribute.pie.colors[0]" show-alpha/>
          <el-color-picker v-model="attribute.pie.colors[1]" show-alpha/>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import tmSelect from '@/package/components/tm-select'

export default {
  name: 'pie02-option',
  cnName: 'pie02-option',
  components: {
    tmSelect
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      roseTypeList: [
        {label: 'false', value: ''},
        {label: 'radius', value: 'radius'},
        {label: 'area', value: 'area'}
      ],
      positionList: [
        {label: 'outer', value: 'outer'},
        {label: 'outside', value: 'outside'},
        {label: 'inside', value: 'inside'},
        {label: 'center', value: 'center'}
      ],
      lineList: [
        {label: 'solid', value: 'solid'},
        {label: 'dotted', value: 'dotted'},
        {label: 'dashed', value: 'dashed'}
      ],
      alignList: [
        {label: '无', value: 'none'},
        {label: '末端对齐', value: 'labelLine'},
        {label: '文字对齐', value: 'edge'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
